<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<%@ include file="/common/common-css.jsp" %>
		<script>
				cmdList = "/phonedata/data.action";
		</script>
<style>
		#jquery-table td{cursor:pointer !important}
		.load_bg{background:#000;opacity:0.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;}
		.load_img{left:50%;top:180px;position:fixed;height:50px;overflow:hidden;z-index:20000;}
		</style>
	</head>
<body  class="no-skin">

<div  class="load_bg" style="display:none"></div>
<img src="http://img.xmiles.cn/commentloading.gif" class="load_img" style="display:none"/>
	<div class="page-content">
				<form id="queryForm" action="${cmdList}">
					<div class="page-content-area">
						<div class="row">
							 <div class="col-sm-12">
								<div class="widget-box" style="border:0px solid #ccc; border-top:none;border-bottom:none;margin-top:15px;">
								<hr style="margin-top:0px;margin-bottom:0x">
								<div class="widget-header widget-header-blue widget-header-flat">
										<h4 class="widget-title">流量充值</h4>
										<div class="widget-toolbar">
											<a href="#" data-action="collapse">
												<i class="ace-icon fa fa-chevron-up"></i>
											</a>
										</div>
									</div>
									<div class=" widget-body">
												<!-- <div class="widget-main" style="padding:12px;border:0px solid #ccc; border-top:none;border-bottom:none;"> -->
												<div class="widget-main" >
														
														<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
																<label class="col-sm-6 control-label"  style="text-align:right"  for="sex">手机号码:</label>
																<div class="col-sm-6">
																	<input type="text" class="input-sm form-control" style="padding-left:0px" name="number" id="number">
																</div>
														</div>
														
														<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3" style="text-align:right">
																	<button class="btn btn-purple  no-border" type="button" name="btn-query" onclick="query_any()">
																		<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
																		查询流量套餐
																	</button>
																	&nbsp;&nbsp;&nbsp;
																	<button class="btn btn-grey  no-border" type="reset">
																		<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
																		重置
																	</button>
														  </div>
											
												</div><!-- /.widget-main -->
										</div><!-- /.widget-body -->
								</div><!-- /.widget-box -->
							</div><!-- /.col-sm-12 -->
						</div><!-- /.row -->
						<hr style="display:none;" id="delete_hr">
							<div class="row">
								<div class="col-xs-12">
									<table id="jquery-table" class="table table-striped table-bordered table-hover">
									</table>
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content-area -->
				</form>
			</div><!-- /.page-content -->
				
				<%@ include file="/common/common-js.jsp" %>
	
		<!-- inline scripts related to this page -->
	
		<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
		<script type="text/javascript">
		//【查询】按钮Click事件
		 function query_any(){
			$("#output").removeAttr("style");
			$(".load_bg").removeAttr("style");
			$(".load_img").removeAttr("style");
			if(jqTable != null){jqTable.fnDraw();}
			else{loaddata();}
			 $("#delete_btn").attr("style","display:block");
			 $("#delete_hr").attr("style","margin-top:0px;margin-bottom:20px;display:block");
		  }
 
			var jqTable =null;
			var loaddata = function(){
				jQuery(function($) {
					jqTable = $('#jquery-table').dataTable( {
	                    //数据列控制（包括对应返回JSON属性名称，对应表头列索引位置、数据转换封装等）
					    "columnDefs": [
					    	{	  
					    		  "title":"套餐ID",
					    	  	  "targets": [0],
					    	  	  "data": "cardid",
					    	  	  "name": "cardid",   //JSON返回属性
					    	  	  "bSortable": false,
					    	},
					    	{
					    		  "title":"流量",  //列名
					    		  "name":"amount",
					    		  "data": "amount",   //JSON返回属性
					    		  "targets": [1], //第几列
					    		  "bSortable": true,
					    	},
					    	{
					    		  "title":"成本",
					    		  "name":"ordercash",
					    		  "data": "ordercash",
					    		  "targets": [2],
					    		  "bSortable": false,
					    	},
					    	{
					    		  "title":"内容",
					    		  "name":"cardname",
					    		  "data": "cardname",
					    	  	  "targets": [3], 
					    	  	  "bSortable": false,
					    	},
					    	{
					    		  "title":"",
					    		  "name":"",
					    		  "data": "",
					    	  	  "targets": [4], 
					    	  	  "bSortable": false,
								  "render": function(value, type, row) { // 返回自定义内容
									 return "<a class='btn btn-success btn-sm' href='javascript:void(0)' onclick='opstatus(" + row.cardid + ",\"" + row.cardname + "\"" + ",\"" + row.amount + "\"" + ")'>充值</a>";						 
								  },
					    	}
	                  	],
						"sAjaxSource": ctx + cmdList + "?rand=" + Math.random(),//数据源URL
						"fnServerData": function ( sSource, aoData, fnCallback ) {//从服务器请求数据
					   			var data = $('#queryForm').serializeObject();
								data.aoData = JSON.stringify(aoData);
								$.ajax({
									"dataType": 'json',
									"type": "POST",
									"url": sSource,
									"data":data,
									"success": function(resp){
										fnCallback(resp);
										initListPage();
										$(".load_bg").attr("style","display:none");
										$(".load_img").attr("style","display:none");
									},
									"error": function(XMLHttpRequest, textStatus, errorThrown) {
										$(".load_bg").attr("style","display:none");
										$(".load_img").attr("style","display:none");
										var text = XMLHttpRequest.responseText;
										alert('请求服务器错误,请刷新重试！！' + '原因：' + text);//错误提示，包括服务器重启导致的session失效
									},
								});
						},
						"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
							//console.log("---" + nRow + "+++++" + aData["id"]);
							//=====================这里实现行双击事件======================//
							nRow.ondblclick = function() {
							}; 
						},
						"sScrollXInner": "100%",
						"sScrollY": "100%",//如果不设置，IE会有问题
						 "aaSorting": [[0,"desc"]] //初始化加载，默认按第几列排序、排序方式（列从0开始计算）
				    });
	
			});//end jquery初始化
		};
			
		
		function opstatus(id,cardname,amount){
			var number = $("#number").val();
			var answer = window.confirm("确认充值为" + number + "进行" + cardname + "吗？");
			if(answer){
				$(".btn-success").attr("disabled","disabled");
				var url= ctx + "/phonedata/recharge.action?cardid="+ id + "&number=" + number + "&amount=" + amount + "&memo=" + "后台流量充值";
				 $.ajax({
					 url: url,
					 dataType:"json",
					 type:"POST",
					 success: function(data){
						if(data.status != 1){
							alert(data.message);
						}else{
							alert("充值订单提交成功!请留意充值结果");
						}
					},
					error : function(XMLHttpRequest,textStatus, errorThrown) {
						$(".load_bg").attr("style","display:none");
						$(".load_img").attr("style","display:none");
						alert('请求服务器错误,请刷新重试！！');//错误提示，包括服务器重启导致的session失效
					},
			});
			}
		}
			
		</script>
</body>
</html>
